<template>
    <div>
        <AddBrand ref="brand_ref" @getBrandList="getBrandList" />
        <EditBrand ref="brand_edit" @getBrandList="getBrandList" />
        <div class="com_box">
            <div class="com_tab_content flexbox flexcenter flexbetween">
                <div class="com_tab_box flexbox flexcenter">
                    <div class="com_tab_item" @click="selectTab(item)" :class="{'active':item.id==active}" v-for="item in tabList" :key="item.id">{{item.nickname}}</div>
                </div>
                <div class="flexbox flexcenter" v-if="active==1">
                    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addTask">添加任务</el-button>
                </div>
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addBrand" v-else-if="active==2">品牌广告</el-button>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <div class="reset_btn" @click="resetFun">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter flex">
                    <template v-if="active==1">
                        <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                            <div class="flexbox flexcenter drop_box drop_hover">
                                <span class="drop_text">项目人员</span>
                                <span class="drop_title">{{queryInfo.project_member.length>0?repeatFind(queryInfo.project_member,userList,'id','nickname'):'全部'}}</span>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="dropdown_hascheck flexbox flexcenter">
                                    <span class="hascheck_num" :class="{'hascheck_num_color':queryInfo.project_member.length>0}">已选 {{queryInfo.project_member.length}} 项</span>
                                    <div class="rank_line" style="margin:0 10px"></div>
                                    <el-link type="primary" :underline="false" @click="clearQuery('project_member',1)" v-if="queryInfo.project_member.length>0">清除已选</el-link>
                                </div>
                                <el-checkbox-group v-model="queryInfo.project_member" class="check_style" @change="selectQuery">
                                    <el-checkbox :label="item.id" v-for="item in userList" :key='item.id'>
                                        <span class="el_check_title">{{item.nickname}}</span>
                                        <span class="el-icon-check el_check_icon"></span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="rank_line"></div>
                        <span class="font_14 color_02" style="margin:0 12px">收款日期</span>
                        <el-date-picker style="width:260px" value-format="yyyy-MM-dd" v-model="queryInfo.getmoney_date" type="daterange" clearable size="small" @change="selectQuery" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </template>
                    <template v-else-if="active==2">
                        <span class="font_14 color_02" style="margin:0 12px">上线日期</span>
                        <el-date-picker style="width:260px" value-format="yyyy-MM-dd" v-model="brandQuery.getmoney_date" type="daterange" clearable size="small" @change="getBrandList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </template>
                </div>
            </div>
        </div>
        <AwemeTask :queryInfo="queryInfo" :taskData="taskData" @getDataList="getDataList" @getCount="getCount" @eidtTask="eidtTask" v-if="active==1" key="task" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
        <BrandTable :brandQuery="brandQuery" @editBrand="editBrand" :brandData="brandData" @getBrandList="getBrandList" v-else-if="active==2" key="brand" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
    </div>
</template>

<script>
import AwemeTask from "./AwemeTask";
import AddBrand from "./AddBrand";
import EditBrand from "./EditBrand";
import BrandTable from "./BrandTable";
export default {
    components: {
        AwemeTask,
        AddBrand,
        EditBrand,
        BrandTable,
    },
    name: "",
    data() {
        return {
            active: 1,
            showrank: true,
            loading: false,
            userList: [],
            queryInfo: {
                project_id: null,
                page: 1,
                limit: 20,
                project_member: [],
                getmoney_date: [],
                apitype: "total",
            },
            taskData: {
                manager: false,
                total: 0,
                setpage: 1,
                tableData: [],
                countData: {},
            },
            brandQuery: {
                page: 1,
                limit: 20,
                project_id: null,
                getmoney_date: [],
            },
            brandData: {
                total: 0,
                setpage: 1,
                tableData: [],
                countData: {},
            },
            tabList: [
                {
                    id: 1,
                    nickname: "达人任务",
                },
                {
                    id: 2,
                    nickname: "品牌广告",
                },
            ],
        };
    },
    created() {
        this.brandQuery.project_id = this.queryInfo.project_id =
            this.$route.query.project_id;
        this.getDataList(1);
        this.getCount();
        this.getUserList();
        // this.getBrandList(1);
    },
    methods: {
        selectTab(item) {
            this.active = item.id;
            this.resetFun();
        },

        selectQuery() {
            this.getDataList(1);
            this.getCount();
        },
        //获取汇总
        async getCount() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/revenue/projectList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.taskData.countData = res.data.list[0];
            }
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/revenue/revenueList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.taskData.tableData = res.data.list;
                this.taskData.total = res.data.count;
                this.taskData.manager = res.data.manager;
            }
        },

        //获取品牌列表
        async getBrandList(page) {
            this.brandQuery.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/revenue/brandadsList",
                this.brandQuery
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.brandData.total = res.data.count;
                this.brandData.tableData = res.data.list;
                this.brandData.countData = res.data.total;
            }
        },

        //获取人员
        async getUserList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szMediaList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.userList = res.data;
            }
        },

        // 添加品牌广告
        addBrand() {
            this.$refs.brand_ref.dialogVisible = true;
        },

        // 编辑品牌广告
        editBrand(row) {
            this.$refs.brand_edit.getData(row);
        },
        repeatFind(b, a, id, name) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][name]);
                    }
                }
            }
            return arr.toString();
        },

        // 清空筛选
        clearQuery(name, type) {
            if (type == 1) {
                this.queryInfo[name] = [];
            } else {
                this.queryInfo[name] = "";
            }
            this.getDataList(1);
            this.getCount();
        },

        // 重置
        resetFun() {
            this.queryInfo.project_member = [];
            this.queryInfo.getmoney_date = [];
            this.brandQuery.getmoney_date = [];
            if (this.active == 1) {
                this.getDataList(1);
                this.getCount();
            } else {
                this.getBrandList(1);
            }
        },

        // 添加任务
        addTask() {
            this.$router.push({
                path: "/task/addtask",
                query: {
                    project_id: this.queryInfo.project_id,
                    name: this.$route.query.project_name,
                },
            });
        },

        // 编辑项目
        eidtTask(row) {
            this.$router.push({
                path: "/task/edittask",
                query: {
                    project_id: this.queryInfo.project_id,
                    name: this.$route.query.project_name,
                    id: row.id,
                },
            });
        },
    },
};
</script>


<style scoped>
.com_tab_content {
    height: 70px;
}
.pro_name {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
}
.reset_btn {
    margin: 0 12px;
    margin-left: 0;
}
</style>


